<template>
    <div class="node-container" @mouseenter="isFocus=true" @mouseleave="isFocus=false">
      <div class="node-header" :style="{backgroundColor:data.getNodeProps().header.bgColor}">
        <div class="node-header-title" :style="{color:data.getNodeProps().header.color}">
          <i  class="iconfont" :class="data.getNodeProps().header.icon" />
        {{ data.getNodeProps().header.title }}
        </div>
        <div class="node-header-right">
          <div class="node-header-tools" v-if="isFocus&&canDelete">
            <i class="iconfont icon-chacha" :style="{color:data.getNodeProps().header.color}" @click="delNode"></i>
          </div>
          <div class="node-level" v-if="nodeLevel!=-1&&!isFocus">
            优先级{{nodeLevel}}
          </div>
        </div>
      </div>
      <div class="node-body">
          <p style="margin-bottom: 0px;" class="node-desc">
            {{ data.getNodeProps().description }}
          </p>
          <img :src="rightArrowPng" alt="">
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted,computed,inject} from 'vue'
import type { PropType } from 'vue';
import nextArrowAdd from '../component/next-arrow-add.vue';
import BaseFlowNode from '../../class/BaseFlowNode';
import rightArrowPng from '../../assets/imgs/right-arrow.png';
import { FlowNodeType } from '../../types';
import chaPng from '../../assets/imgs/cha.png';
import type RouteNode from '../../class/flow-nodes/RouteNode';

let props = defineProps({
  data: {
    type: Object as PropType<BaseFlowNode>,
    default: () => {
      return {}
    }
  },
    //当前支路径下的所有节点
    nodeList: {
    type: Array as PropType<Array<BaseFlowNode>>,
    default: () => {
      return []
    }
  },
  routeNode: {
    type: Object as PropType<RouteNode<BaseFlowNode>>,
    default: () => {
      return {}
    }
  }
})
let removeNode=inject('removeNode') as any

//当前节点位于当前分支的等级
let nodeLevel=computed(()=>{
 if([FlowNodeType.PARALLEL,FlowNodeType.EXCLUSIVE,FlowNodeType.TOLERATE].includes(props.data.getNodeType())){
  console.log( props.routeNode.getBranchs(),props.data.getNodeId())
   let level=-1
    props.routeNode.getBranchs().forEach((branchItem,index)=>{
     
      if(branchItem.findIndex((item)=>{
        return item.getNodeId()==props.data.getNodeId()
      })!=-1){
        level=index+1
      }

    })
    return level
 }else{
  return -1
 }
})

let canDelete=computed(()=>{
  if(props.data.getNodeType()===FlowNodeType.START||props.data.getNodeType()===FlowNodeType.END){
   return false
 }else{
   return true

  }
})

//当前鼠标是否聚焦在节点上
let isFocus=ref(false)

function delNode(){
  removeNode(props.data)
}

</script>
<style scoped lang="less">
@import url('../../styles/index.less');

.copy{
  width:@node-width;
  height: fit-content;
  position: relative;
 z-index: @node-zIndex;
  // border: 1px solid #d9d9d9;
}
.node-container{
    height: 85px;
    width: 100%;
    cursor: pointer;
    background: white;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 #d8d8d8;
}
.node-container:hover{
  box-shadow: 0 0 5px 0 #80929C;
}
.node-header{
  display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    color: white;
    height: 25px;
    font-size: 13px;
    background-color: white;
}
.node-header-title{
  flex:1
}
.node-header-right{
  width: auto;
  display: flex;
  align-items: center;
  .node-level{
    color: #909399;
  }
  i{
    font-size: 10px;
  }
}
.node-body{
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  height: calc(100% - 25px);
  .node-desc{
    font-size: 14px;
    color: #666;
   flex:1
  }
  img{
    width: 16px;
    height: 16px;
    margin-left: 10px;
  }
}

</style>